<template>

    <div class="login-form">
        <div class="top">
            <div class="left">
                <div class="logo">
                    <!-- <img height="100%" src="/static/images/login-logo-top.png" alt="logo"> -->
                </div>
            </div>
            <div class="right"></div>
        </div>
        <div class="content">
            <div class="left hidden-md-and-down">
                <!-- <img height="100%" src="/static/images/login-logo-middle.png" alt="logo"> -->
            </div>
            <div class="centre"></div>
            <div class="right"> <el-form ref="formRef"  :rules="rules" label-position="right"
                    label-width="1" :model="loginData">
                    <el-form-item>
                        <div
                            style="text-align: center; width: 100%;color: #ffffff; font-size: 1.5rem; font-weight: bold;">
                            登录</div>
                    </el-form-item>
                    <el-form-item prop="compno">
                        <el-select @visibleChange="visibleChangeEv" v-model="loginData.compno" placeholder="账套"
                            size="large" style="width: 100%">
                            <el-option v-for="item in compList" :key="item.compno" :label="item.name"
                                :value="item.compno" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="username">
                        <el-input size="large" placeholder="用户" v-model="loginData.username" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" size="large" placeholder="密码" v-model="loginData.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button size="large" @click="CompDataEv" style="width: 100%;" >登录</el-button>
                        <!-- <el-button size="large" style="width: 100%;" @click="CompDataEv">登录</el-button> -->
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-button style="width: 100%;" @click="resetForm">重置</el-button>
                    </el-form-item> -->
                </el-form></div>

        </div>
        <div class="footer">
            <div class="itm"></div>
            <div class="itm itm-centre">
                <div>©2024 广东天心天思智能科技有限公司</div>
            </div>
            <div class="itm"></div>
        </div>
    </div>
</template>

<script setup>
import 'element-plus/theme-chalk/display.css'
import { useRouter } from 'vue-router'

import { reactive, ref, onMounted } from 'vue'
const loginData = reactive({
    username: '',
    password: '',
    compno: ''
})
const compList = ref([])


// const permissionData = permissionStore()

const rules = reactive({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    compno: [
        { required: true, message: '请选择账套', trigger: 'change' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 2, max: 50, message: '长度为2-50', trigger: 'blur' },
    ],
})


const route = useRouter()

const formRef = ref(null);


onMounted(async () => {

    // const isRegister = await settingConfig()
    // console.log("isRegister", isRegister)
    // if (isRegister != true) {
    //     CompDataEv()
    // }

 

});

const CompDataEv = () => {
  route.push({ path: '/home' })
}


</script>

<style lang='less' scoped>
.login-form {
    display: flex;
    flex-direction: column;
    // background-color: rgb(48, 65, 86);
    background-image: url('/static/images/login-background.png');
    background-repeat: no-repeat; //是否平铺
    background-position: center; //设置背景图像的起始位置
    background-size: cover; //规定背景图像的尺寸
    height: 100vh;
}

.login-form .content {
    display: flex;
    align-items: center;
    justify-content: center;
    // min-width: 320px;
    flex: 1;
    width: 100%;

    .left {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: right;
    }

    .centre {
        width: 1rem;
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .el-form {
        border-radius: 10px;
        // box-shadow: var(--el-box-shadow-light);
        box-shadow: 0px 0px 12px #FFFFFF;
        padding: 20px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.15);
        // background-color: #FFFFFF;
        // opacity: 0.8;
        // opacity: 0.9;
        // width: var(--login-form-width);
        width: 23rem;
    }
}

.login-form .top {
    height: 6rem;
    // background-color: pink;
    padding: 1.5rem;
    box-sizing: border-box;

    .left {
        display: flex;
        align-items: center;
    }

    .left .logo {
        height: 3rem;
    }
}

.login-form .footer {
    height: 6rem;
    display: flex;
    align-items: center;

    .itm {
        flex: 1;
    }

    .itm-centre {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        // font-weight: bold;
        // font-size: 1rem;
    }
}

.el-select-dropdown__item {
    font-weight: bold;
}
</style>